I'm trying to loop through all bonus lines (usually there are thousands of them) to approve each one in the ajax call. The reason I didn't do a "approveAll" method is because each bonus header has multiple line items associated with it. Approve all method will time out. So making an ajax call one at a time seems to be the better solution.
However, with my code, I ran into two problems. 1. The log seems to have a lot of errors coming back enter image description here
and 2. looks like only half of the ajax call succeeded. The progress bar stops at 46% and my DB has half of the bonus line not updated at all.
function approveAll(){
$("#awaitModal").modal('show');
var url, tr, total, completed, percentage
url = "/Index?handler=ApproveOneBonus"
tr = document.getElementById('bonusTable').getElementsByClassName('bonusLine')
total = tr.length
console.log(total)
completed = 0
for(i=0; i<total; i++){
bonusId = tr[i].id.replace("bonusItem","")+""
$.ajax({
type: "POST",
url: url,
async: true,
headers: { "RequestVerificationToken": '@GetAntiXsrfToken()' },
data: {"bonusId":bonusId},
success: function(resp){
completed = completed + 1
percentage = completed/total*100
updateProgress(percentage)
},
complete:function(){
}
});
}
}
function updateProgress(percentage){
if(percentage > 100){
percentage = 100
}
$('#progressBar').css('width', percentage+'%');
$('#progressBar').attr('aria-valuenow', percentage);
$('#progressBar').html(percentage+'%');
}<div class="modal fade" tabindex="-1" id="awaitModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
Please wait...
<div class="progress progress-striped active" style="height:44px;">
<div id="progressBar" class="progress-bar" role="progressbar" style="width:1%;"></div>
</div>
</div>
</div>
</div>
</div>